<template>
  <div class="list-wrapper">
    <div class="left">
      <h4><slot name="title"></slot></h4>
      <p><slot name="desc"></slot></p>
      <div class="seperate"></div>
      <p class="author">作者：{{ author }}</p>
    </div>
    <img :src="url" />
  </div>
</template>

<script>
export default {
  props: ['author', 'url']
}
</script>

<style>
.list-wrapper{padding: 20px; text-align: left; height: 150px; border-bottom: 1px solid #ccc;}
  .list-wrapper img{width: 100px; float: right; height: 100px;}
  .list-wrapper .left{float: left; width: 65%;}
  .list-wrapper p{margin: 10px 0; color: #999; font-size: 14px;}
  .list-wrapper .author{color: #ccc; font-size: 12px;}
  .list-wrapper .seperate{width: 20px; height: 1px; background-color: #eee;}
</style>
